<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div :class="['user_login_right', device]">
      <img
        alt="logo"
        height="55"
        src="~@/assets/login_logo2.png"
        style="margin-left: 74px"
        width="251">
      <img
        alt="logo"
        height="26"
        src="~@/assets/login_welcome_text.png"
        style="margin-left: 80px;margin-top: 33px"
        width="240">
      <route-view></route-view>
    </div>
  </div>
</template>

<script>
import RouteView from './RouteView'
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'UserLayout',
  components: { RouteView },
  mixins: [mixinDevice],
  data() {
    return {}
  },
  mounted() {
    document.body.classList.add('userLayout')
  },
  beforeDestroy() {
    document.body.classList.remove('userLayout')
  }
}
</script>

<style lang='less' scoped>

@font-face {
  font-family: "Microsoft YaHei";
}

#userLayout.user-layout-wrapper {
  width: 100%;
  height: 100%;
  background: #000 url("~@/assets/bj.png") no-repeat center;

  &.mobile {

    .container {
      width: 100%;

      .user_login_right {
        max-width: 100%;
        width: 100%;
        margin: 120px 0 0 0;
      }

      .main {
        margin-left: 12px;
        margin-right: 12px;
      }
    }
  }

  a {
    text-decoration: none;
  }

  .user_login_right {
    width: 572px;
    height: 589px;
    padding-left: 86px;
    padding-right: 86px;
    padding-top: 79px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 100px;
    margin-top: -310px;
    background: #FFFFFF;
    border-radius: 10px;
  }

  .main {
  }
}
</style>
